import React, { useEffect, useState } from 'react'
import { PageHeader } from '@ant-design/pro-layout';
import { Descriptions, message } from 'antd';
import { HeartTwoTone } from '@ant-design/icons';
import { connect, history, useParams } from 'umi';
import moment from 'moment';
import axios from 'axios';
import { useRequest } from 'ahooks';

// 发起网络请求，通过提交的信息去验证用户名和密码以及状态的验证
const getCurrentNewsRequest = (id: string | number | undefined) => {
    return axios.get(`http://localhost:3000/news/${id}?_expand=category&_expand=role`)
}
// 发起网络请求，通过提交的信息去验证用户名和密码以及状态的验证
const updateCurrentNewsRequest = (id: string | number | undefined,item:any) => {
    return axios.patch(`http://localhost:3000/news/${id}?_expand=category&_expand=role`,{
        ...item
    })
}
function NewsDetail(props: any) {
    // 记录当前id新闻信息
    const [currentNews, setCurrentNews] = useState<any>(null);
    // 记录该用户是否点赞过
    const [isClickStar, setIsClickStar] = useState(false);
    // 记录当前文章id值
    const { id } = useParams();
    
    // useRequest使用,获取当前新闻
    const { run: updateCurrentNewsData } = useRequest(updateCurrentNewsRequest, {
        throttleWait: 300,
        manual: true,
        onSuccess: (result: any, params) => {
            if (result.status === 200) {
                setCurrentNews(result.data);
            }
        },
        onError(e, params) {
            message.warning('请求新闻数据失败')
        },
    })
    // useRequest使用,获取当前新闻
    const { run: getCurrentNewsData, loading } = useRequest(getCurrentNewsRequest, {
        throttleWait: 300,
        manual: true,
        onSuccess: (result: any, params) => {
            if (result.status === 200) {
                //获取数据后，发起网络请求，view（浏览量+1）
                updateCurrentNewsData(id,{view:result.data.view+1})
            }
        },
        onError(e, params) {
            message.warning('请求新闻数据失败')
        },
    })

    useEffect(() => {
        getCurrentNewsData(id)
    }, [id]);
    const handelAddStar = () => {
        // 由于游客访问系统暂无登录功能，此处是为了在不刷新情况下，一个用户只能点击一次赞
        if (!isClickStar) {
            setIsClickStar(true);
            updateCurrentNewsData(id,{star:currentNews.star+1})
            message.success('谢谢你的点赞O(∩_∩)O')
        }
        else {
            message.warning('你已经点过赞了<( _ _ )>')
        }
    }
    return (
        <>
            <div >
                <PageHeader
                    ghost={false}
                    onBack={() => history.back()}
                    title={currentNews?.title}
                    subTitle={<><span>{currentNews?.category?.title} </span>
                        <HeartTwoTone style={{ marginLeft: '20px' }} twoToneColor="#eb2f96" onClick={() => { handelAddStar() }} />
                    </>}
                    style={{'borderBottom': '1px solid rgb(235, 237, 240)'}}

                >
                    <Descriptions size="small" column={3} style={{ marginBottom: '20px' }}>
                        <Descriptions.Item label="创建者">{currentNews?.author}</Descriptions.Item>
                        <Descriptions.Item label="发布时间">
                            {currentNews?.publishTime ? moment(currentNews.createTime).format('YYYY/MM/DD HH:mm:ss') : '暂未发布'}
                        </Descriptions.Item>
                        <Descriptions.Item label="区域">{currentNews?.region ? currentNews.region : '全球'}</Descriptions.Item>
                        <Descriptions.Item label="访问数量" ><span style={{ 'color': 'green' }}>{currentNews?.view}</span></Descriptions.Item>
                        <Descriptions.Item label="点赞数量" ><span style={{ 'color': 'green' }}>{currentNews?.star}</span></Descriptions.Item>
                        <Descriptions.Item label="评论数量" ><span style={{ 'color': 'green' }}>0</span></Descriptions.Item>
                    </Descriptions>
                </PageHeader>
            </div>
            <div dangerouslySetInnerHTML={{ __html: currentNews?.content }} style={{ margin: '0 auto', width: '95%',marginTop:'20px' }}>
            </div>
        </>
    )
}
const mapStateToProps = (state: any) => {
    return {
        currentNewsData: state.StandBox.currentNewsData
    }
}
export default connect(mapStateToProps)(NewsDetail)
